<template>
    <div id="home">
        <Head>
            <div slot="head-center">
                <input type="text" placeholder="输入" />
                <van-icon name="search" size="27px" class="input-text" />
            </div>
        </Head>
        <Rotation></Rotation>
        <p>
            <span>最近流行</span>
        </p>

        <Recommended class="ded" @rec="rec"></Recommended>
        <Res 
        :malls='reco3'
        ></Res>
         <Bar>
            <Baritme  path='/home' acColor='#ff5000'>
                <van-icon name="bag-o" slot="baritme-ico" size="27px" />
                <van-icon
                    name="bag-o"
                    
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />
                <div slot="baritme-text">首页</div>
            </Baritme>
            <Baritme  path='/classification' acColor='#ff5000'>
                <van-icon name="send-gift-o"  slot="baritme-ico" size="27px" />
                <van-icon
                    name="send-gift-o"
                    
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />
                <div slot="baritme-text">分类</div>
            </Baritme>
            <Baritme path='/shoppin' acColor='#ff5000'>
                <van-icon name="shopping-cart-o" slot="baritme-ico" size="27px" />
                <van-icon
                    name="shopping-cart-o"
                   
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />
                <div slot="baritme-text">购物车</div>
            </Baritme>
            <Baritme path='/my' acColor='#ff5000'>
                <van-icon name="manager-o" slot="baritme-ico" size="27px" />
                <van-icon
                    name="manager-o"
                    
                    slot="baritme-ico-active"
                    color="#ff5000"
                    size="27px"
                />

                <div slot="baritme-text">我的</div>
            </Baritme>
        </Bar>
    </div>
</template>


<script>
import Head from "../components/common/Head";
import Rotation from "../components/common/Rotation";
import Recommended from "../components/taobao/Recommended";
import Res from "../components/taobao/Res";
import Baritme from "../components/common/Baritme";
import Bar from "../components/common/Bar";

export default {
    name: "Home",
    components: {
        Head,
        Rotation,
        Recommended,
        Res,
        Bar,
        Baritme
    },
    data() {
        return {
            reco: [],
            reco1: [],
            reco2: [],
            reco3: []
        };
    },
    // created() {
    //     this.axios.get("data/mall.json").then(res => {
    //         this.reco1 = res.data.filter(re => {
    //             return re.attribute == "衣服";
    //             this.reco2 = res.data.filter(re => {
    //                 return re.originalPrice.Number() <= 200;
    //             });
    //         });
    //     });
    // },

    created(){
        this.axios.get('data/mall.json').then(res => {
           
            this.reco1 = (res.data).filter(re =>{
                return re.attribute == "衣服";
            })
            this.reco2 = (res.data).filter(re =>{
                  return re.attribute == "化妆品"
            })
             this.reco3 = res.data
             this.reco = res.data
        })

    },
    methods: {
        rec(index) {
           
            if(index==0){
                this.reco3 = this.reco
            }else if(index == 1){
                this.reco3 = this.reco1
            }else if(index == 2){
                this.reco3 = this.reco2
            }
        }
    }
};
</script>
<style scoped>
#home {
    padding-top: 55px;
    padding-left: 10px;
    padding-right: 10px;
}
input {
    display: inline-block;
    background-color: rgb(179, 180, 187);
    border-radius: 44px;
    width: 200px;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}
.input-text {
    position: relative;
    top: 9px;
    left: 10px;
}
p {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    border-bottom: 3px solid #f5f5f5;
}
.ded {
    position: sticky;
    top: 50px;
}
</style>